<!--
* @author wn
* @date 2022/04/27 15:16:44
* @description: 主页 轮播图--XtxCarousel
!-->
<template>
	<section class="home-banner">
		<xtx-carousel :sliders="sliders" autoPlay />
	</section>
</template>
<script setup>
import { findBanner } from '@/network/home'
import { ref } from 'vue'
// export default {
// name: 'HomeBanner',
// setup() {
// 获取轮播图数据
const sliders = ref([])
findBanner().then(v => {
	sliders.value = v.result
})
// return { sliders }
// },
// }
</script>
<style scoped lang="less">
// container 相对定位
.home-banner {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 500px;
	z-index: 98;
}
// 覆盖样式 被 category 组件覆盖 中心点 左侧按钮 重新计算位置
.xtx-carousel {
	// 某个深层元素 或其他深层样式时，需要使用
	:deep(.carousel-btn.prev) {
		left: 270px;
	}
	:deep(.carousel-indicator) {
		padding-left: 250px;
	}
}
</style>
